import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
// import { myfun } from '../../assets/qunee-min.js'
@Component({
  selector: 'app-machine-room',
  templateUrl: './machine-room.component.html',
  styleUrls: ['./machine-room.component.scss']
})
export class MachineRoomComponent implements OnInit {

  constructor() { }
 
  ngOnInit() {
    var Q= window['Q']
    var graph =new Q.Graph('mcRoom');
	console.log(graph);
	
		graph.originAtCenter = false;
	// var computer2 = graph.createNode('computer2',-100,-100);
	// var computer1 = graph.createNode('computer1',-100,100);
	// var computer3 = graph.createNode('computer3',100,-100);
	// var computer4 = graph.createNode('computer3',100,100);
	// // computer3.image='./jiaohuanji.jpg';
	// computer3.image=Q.Graphs.server
	// computer1.image=Q.Graphs.group;
	// computer2.image=Q.Graphs.node;
	// computer4.image=Q.Graphs.exchanger;
	// var group= graph.createGroup();
	// group.addChild(computer1)
	// group.addChild(computer2)
	// group.groupType = Q.Consts.GROUP_TYPE_ELLIPSE
	// group.padding = new Q.Insets(40, 10, 10, 10);
for(var i=0;i<41;i++){
	var bus = graph.createShapeNode();
	var height=i*15
bus.moveTo(0, height);
bus.lineTo(800, height);
bus.setStyle(Q.Styles.SHAPE_STROKE_STYLE, '#e92322');
bus.setStyle(Q.Styles.SHAPE_STROKE,0.5)
bus.setStyle(Q.Styles.SHAPE_LINE_DASH, [5,2]);
bus.isSelected=function(){ return false;};
bus.isMovable =function(){ return false;};
if(i%4==0){
	bus.setStyle(Q.Styles.SHAPE_LINE_DASH, [5,0]);
}
}
for( var i=0; i<53; i++){
	var line = graph.createShapeNode();
	var width= i*15;
	line.moveTo(width,0)
	line.lineTo(width,600)
	line.setStyle(Q.Styles.SHAPE_STROKE_STYLE, 'green');
	line.setStyle(Q.Styles.SHAPE_LINE_DASH, [5,2]);
	
	if(i%4==0){
	line.setStyle(Q.Styles.SHAPE_LINE_DASH, [5,0]);
	
}
}
	graph.isSelected=function(e){ 
		console.log(e);
		
		if(e.$name==="computer"||e.$name==='jjj'){
			return true;
		}
		
		
	};
	graph.isMovable = function(e){ 
		if(e.$name==="computer"||e.$name==='jjj'){
			return true;
		}
	}


	var computer= graph.createNode("computer",100,100)

var src ,startX,startY;
	$(document).mousedown(function(e){
		// console.log(e);
		src = e.target['src'].split("/")[4];
		// console.log(src);
	
		startX=e.offsetX;
		startY=e.offsetY;
	})
	$(document).mousemove(function(e){
		
		
	})
	$(document)[0].ondrop=function(e){
		// console.log('鼠标弹起的e');
			// console.log(e);
		var p =	graph.toLogical(e.offsetX,e.offsetY)
			var computer= graph.createNode("computer",p.x,p.y)
			computer.image='assets/'+src;
			computer.size = {width: 60}
			//数据的存储
			var arr=[];
			model.forEach(function(node){
				if(node.$name==="computer"){
			var element ={name:'',id:'',x:'',y:''}
			element.name =node.name
			element.id=node.id;
			element.x=node.x;
			element.y=node.y;
			arr.push(element)
			console.log(arr);}
			
});
		console.log(graph.getUI(739))	
	}


	var model = graph.graphModel;
	//数据的渲染
	var info = [{name:'jjj',id:'1',x:200,y:200},{name:'ppp',id:'2',x:300,y:300}]
	for(var i=0; i<info.length; i++ ){
	graph.createNode(info[i].name,info[i].x,info[i].y)
	}
  }
}
